<template>
	<view class="spec-box">
		<view class="t-box" >
			<text class="s-tit">{{title}}</text>
			<text class="txt-dec" v-if="isMoreBrand">{{titleTxt}}</text>
			<view class="s-box">
				<input class="ipt-search"
					type="search" 
					@input="searchInput"
					@keydown.enter="keydownEnter()" 
					:focus="isSearching"
					v-model="kw" 
					:placeholder="placeholder"/>
				<view class="i-search">
					<text class="icon-font search-icon d-btn" v-if="isSearching" @click="delKw()">{{"\ue64a"}}</text>
				</view>
				<text class="icon-font search-icon s-btn" @click="doSearch()">{{"\ue605"}}</text>
			</view>
			<text class="s-tip-txt">点击搜索按钮查看更多品牌</text>
		</view>
		<view class="l-box">
			<view class="unit-box comm-list" id="brandBox">
				<view class="unit-item " v-for="(item,index) in brandList" 
					:key = "index" :class="{'active' : item.checked}" @click="changeBrands(item)">  
					<view>{{item.title}}</view> 
					</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import goodsCtrl from "../../js/gd/GoodsCtrl.js";
	import lang from "../../js/conf/Lang.js";
	import goodsTlpCtrl from "../../js/gd/GoodsTlpCtrl.js";
	import util from "@/js/util/Util.js";
	export default
	{
		data(){
			return{
				title:lang.brandTxt.title,
				titleTxt:lang.brandTxt.titleTxt,
				brandList : [],
				newBrandList : [],
				isMoreBrand : true,
				
				isSearching : false,
				kw : "",
				placeholder:"请输入品牌名称"
			}
		},
		
		methods:
		{
			changeBrands(item,index)
			{
				item = goodsCtrl.changeBrands(item,index);
				this.$forceUpdate();
			},
			
			initData()
			{
				this.isMoreBrand = goodsTlpCtrl.getTplBrandMoreLimit();
				this.brandList = [];
				this.newBrandList = [];
				this.brandList = goodsCtrl.getBrandList();
			},
			
			keydownEnter()
			{
				this.scanGunCtrl.isGun = false;
				this.doSearch();
			},
			
			doSearch()
			{
				let that = this;
				goodsCtrl.loadMoreBrand(back,this.kw);
				function back()
				{
					console.log("关键字搜索返回！！！！！");
					that.initData();
				};
			},
			
			searchInput(e)
			{
				if(this.kw != "")
				{
					this.isSearching = true;
				}
				else
				{
					this.isSearching = false;
				}
			},
			
			delKw()
			{
				if(this.isSearching)
				{
					this.kw = "";
					this.isSearching = false;
					this.doSearch();
				}
			},
			
			moreBrand()
			{
				// let that = this;
				// goodsCtrl.loadMoreBrand(back);
				// function back()
				// {
				// 	that.initData();
				// };
				this.doSearch();
			},
			
			
			handlerScroll()
			{
				this.$nextTick(()=>
				{
					let flag = util.scrollData("#brandBox");
					if(flag)
					{
						this.moreBrand();
					}
				});
			},
		},
		
		mounted()
		{
			if(document.querySelector("#brandBox"))
				document.querySelector("#brandBox").addEventListener("scroll",this.handlerScroll,true);
		},
	}
</script>

<style lang="scss">
	.spec-box
	{
		font-size: 13px;
		color: #333;
	    padding-top: 20px;
		.s-tit
		{
			font-weight: bold;
		}
		
		.t-box
		{
			display: flex;
			align-items: center;
			padding-bottom: 10px;
			.txt-dec
			{
				// padding-right: 10px;
			}
			.s-tip-txt
			{
				color: #999;
				padding-left: 20upx;
			}
		}
		.s-box{
			margin-left: 10px;
		}
		.l-box
		{
			width: 100%;
			display: flex;
			margin-bottom: 10px;
			max-height: 250upx;
			.unit-box
			{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.unit-item
				{
					padding: 4px 20px;
					border-radius: 4px;
					margin-right: 10px;
					margin-top: 10px;
					border: 1px solid #3388FF;
					cursor: pointer;
				}
				.active
				{
					background: #38F;
					color: #FFF;
				}
			}
		}
		
		.more-b-txt
		{
			color: #3388ff;
			padding-left: 20px;
			cursor: pointer;
		}
	}
	
	
</style>
